<template>
  <!-- 热点文章 -->
  <div id="justInTimeList" class="justInTimeList">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <HHeader></HHeader>
    <div class="justInTimeListCont">
      <div class="justInTimeListCont_crumbs">
        <span>
          <router-link :to="{name:'home'}">首页</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>热点文章</span>
      </div>
      <div class="justInTimeListCont_cluster">
        <div class="justInTimeListCont_cluster_Left">
          <div class="floorTitle">
            <span>热点文章</span>
            <i class="iconfont icon-xiegang"></i>
            <span>HOT ARTICLE</span>
          </div>
          <div class="justInTimeListCont_cluster_Cont">
            <ul>
              <li
                v-for="(item,index) in justListCont"
                :class="{justListNav:justListNav===index}"
                @click="justListNav=index"
                :key="index"
              >
                <p>
                  <a @click="periodicalloogin(item.OpenId)">{{item.Title}}</a>
                </p>
                <p>{{item.Abstract}}</p>
                <p>
                  <!-- <span>{{item.AddDate}}</span> -->
                  <span>{{item.organization}}&nbsp;|&nbsp;{{item.Year}},{{item.Volume}}({{item.Issue}})</span>
                </p>
              </li>
              <el-pagination
                class="r"
                @size-change="handleSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="page.currentPage"
                :page-sizes="page.sizes"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
              ></el-pagination>
            </ul>
          </div>
        </div>
        <div class="justInTimeListCont_cluster_Right">
          <SpecialRecomm></SpecialRecomm>
          <MonthRank></MonthRank>
          <div class="justRight_img">
            <img src="../../../../../static/syimg/xxg_10.png" />
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
    
    
    
  </div>
</template>
<script>
// import router from "@/router/index";
//juqery
import { pagination } from "../../../../../src/assets/mixin/data-table";
import Viewer from "v-viewer";

export default {
  name: "justInTimeList",
  mixins: [pagination],
  data() {
    return {
      justListCont: [],
      justListNav: ""
    };
  },
  methods: {
    getInfo() {
      this.page.currentPage = 1;
      this.getTableData();
    },
    // getTableData(){
    //   this.$httphelper.post('/api/Lm/GethotNewsList',{
    //     PageIndex:this.page.currentPage,
    //     PageSize:this.page.pageSize
    //   }).then((res) => {
    //     this.justListCont = res.data.Data.Data
    //     this.justListCont.forEach((item) => {
    //       item.CreatedTime = item.CreatedTime.substr(0,10);
    //     })
    //     this.page.total = res.data.Data.Total
    //   })
    // },
    periodicalloogin(id) {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        this.$uniRouter.push({
          path: "/academic/academicdetail",
          query: {
            id: id
          }
        });
      } else {
        this.$confirm("请先登录", "提示", {
          customClass: "message-logout",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
          // type: 'warning'
        })
          .then(() => {
            this.$uniRouter.push({
              path: "/login"
            });
          })
          .catch(e => {
            console.log(e);
          });
      }
    },
    getTableData() {
      // 加密完成
      this.$httphelper
        .post("/api/JournalArticle/GetPaperList", {
          Condition: 3,
          Page: this.page.currentPage,
          Limit: this.page.pageSize
        })
        .then(res => {
          this.justListCont = res.data.data||[];
          this.justListCont.forEach(item => {
            item.AddDate = item.AddDate.substr(0, 10);
          });
          this.page.total = res.data.totalcount;
        })
        .catch(e => {
          console.log(e);
        });
    },
    handleCurrentPageChange(val) {
      this.page.currentPage = val;
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style lang="less" scoped>
#justInTimeList {
  /deep/.el-pagination__total {
    display: none;
  }
  /deep/.el-pagination__sizes {
    display: none;
  }
  width: 100%;
  .justInTimeListCont {
    width: 100%;
    height: 100%;
    .justInTimeListCont_crumbs {
      width: 1140px;
      height: 20px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      span:nth-child(1) a {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 18px;
        margin-left: 10px;
        font-weight: bold;
      }
      span:nth-child(3) {
        color: #003c80;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .justInTimeListCont_cluster {
      width: 1140px;
      // height:1514px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      .justInTimeListCont_cluster_Left {
        width: 856px;
        height: auto;
        position: relative;
        float: left;
        padding-bottom: 21px;
        .floorTitle {
          width: 856px;
          height: 35px;
          border-bottom: 2px solid #eee;
          position: relative;
          span:nth-child(1) {
            display: inline-block;
            font-size: 20px;
            color: #000;
            width: 85px;
            height: 35px;
            border-bottom: 2px solid #003c80;
            font-family: "Adobe Heiti Std R";
            font-weight: normal;
            line-height: 30px;
          }
          span:nth-child(3) {
            color: #797979;
            font-size: 14px;
            font-family: "Adobe Heiti Std R";
          }
        }
        .justInTimeListCont_cluster_Cont {
          width: 100%;
          margin-top: 15px;
          ul {
            width: 100%;
            height: 100%;
            .justListNav {
              background: #f7f8fa;
              p:nth-child(1) a {
                color: #003c80;
              }
            }
            li:hover {
              background: #f7f8fa;
              p:nth-child(1) a {
                color: #003c80;
              }
            }
            li {
              list-style: none;
              width: 100%;
              height: auto;
              margin-right: 44px;
              cursor: pointer;
              padding: 23px 13px;
              // background:#F7F8FA;
              background: #fff;
              border-bottom: 1px solid #e6e6e6;
              p:nth-child(1) {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                white-space: nowrap;
                a {
                  color: #003c80;
                  font-size: 18px;
                }
              }
              p:nth-child(2) {
                width: 100%;
                color: #8b8b8b;
                font-size: 14px;
                margin-top: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                text-align: justify;
                margin-bottom: 15px;
              }
              p:nth-child(3) {
                width: 100%;
                margin-top: 8px;
                span {
                  color: #8b8b8b;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  margin-left: 60px;
                }
              }
            }
          }
        }
      }
      .justInTimeListCont_cluster_Right {
        width: 265px;
        float: right;
        border-left: 1px solid #eeeeee;
        position: relative;
        top: 33px;
        .justRight_img {
          width: 250x;
          height: 164px;
          margin-left: 19px;
          margin-top: 25px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
/deep/.footBot {
  margin-top: 0px !important;
}
/deep/.el-pagination {
  width: 100% !important;
  text-align: center;
  overflow: hidden;
  position: relative;
  bottom: -10px;
  overflow-x: auto;
}

@media screen and (max-width: 1010px) {
  .justInTimeListCont {
    position: relative;
    top: 35px;
  }
  /deep/.el-pagination__sizes {
    display: none !important;
  }
  .justInTimeListCont_cluster {
    width: 100% !important;
    margin-top: 18px !important;
    .justInTimeListCont_cluster_Left {
      width: 94% !important;
      margin: 0 auto;
      float: none !important;
      .floorTitle {
        width: 100% !important;
        margin: 0 auto;
        span:nth-child(1) {
          font-size: 18px !important;
        }
      }
      .justInTimeListCont_cluster_Cont {
        margin-top: 0 !important;
        ul {
          li {
            p:nth-child(1) {
              a {
                font-size: 16px !important;
              }
            }
            p:nth-child(3) {
              span:nth-child(2) {
                float: right;
              }
            }
          }
        }
      }
    }
    .justInTimeListCont_cluster_Right {
      display: none;
    }
  }
  .justInTimeListCont_crumbs {
    display: none;
  }
  #mofootBase {
    margin-top: 68px;
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>